<template>
  <div class="login-container">
    <el-row>
      <el-col :span="12">
        <div class="login-panel">
          <h1>Hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <el-form
            class="login-form"
            :model="userInfo"
            :rules="rules"
            ref="loginFormRef"
          >
            <el-form-item class="login-input" prop="username">
              <el-input
                :prefix-icon="User"
                v-model="userInfo.username"
              ></el-input>
            </el-form-item>
            <el-form-item class="login-input" prop="password">
              <el-input
                :prefix-icon="Lock"
                type="password"
                v-model="userInfo.password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="login-button" type="primary" @click="login"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="12"></el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import useUserStore from "../../store/modules/user";
import { ElNotification } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { getTime } from "../../utils/time";

const $route = useRoute();
// console.log($route.query);
const userStore = useUserStore();
const $router = useRouter();
const userInfo = reactive({ 'username': "admin", 'password': "111111" });
const loginFormRef = ref();
const validateUsername = (rule: any, value: any, callback: any) => {
  if (value.length >= 5) {
    callback();
  } else {
    callback(new Error("请输入正确的用户名"));
  }
};
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value.length >= 6) {
    callback();
  } else {
    callback(new Error("请输入正确的密码"));
  }
};
const rules = {
  username: [{ validator: validateUsername, trigger: "change" }],
  password: [{ validator: validatePassword, trigger: "change" }],
};

const login = async () => {
  await loginFormRef.value.validate();
  try {
    await userStore.login(userInfo);
    if ($route.query.redirect) {
      $router.push($route.query.redirect as string);
    } else {
      $router.push("/");
    }
    
    ElNotification({
      type: "success",
      message: "登录成功",
      title: `${getTime()}好！`, 
    });
  } catch (error) {
    ElNotification({
      type: "error",
      message: (error as Error).message,
    });
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background: url("@/assets/login_img2.png") no-repeat;
  background-size: cover;
  .login-panel {
    padding: 10px 20px;
    width: 80%;
    position: relative;
    top: 30vh;
    left: 50px;
    background: url("@/assets/login_panel.jpeg") no-repeat;
    background-size: cover;
    opacity: 0.8;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影 */
    // border: none;
    h1 {
      font-size: 40px;
      margin-bottom: 10px;
    }
    h2 {
      font-size: 30px;
      margin-bottom: 7px;
    }
    .login-form {
      //   border: 1px solid red;
      margin-top: 15px;
      .login-input {
        width: 75%;
        margin: 0 auto;
        margin-bottom: 18px;
      }
      .login-button {
        width: 75%;
        margin: 0 auto;
      }
    }
  }
}
</style>
